<!--
 * @Descripttion: 
 * @version: 
 * @Author: 高月飞
 * @Date: 2023-11-20 13:03:34
 * @LastEditors: 高月飞
 * @LastEditTime: 2023-11-21 17:19:59
-->
<template>
    <div>
        <div class="tableData">
            <span> 已查询客户数：{{ total }}</span>
            <span>已勾选：{{ selectNumber }}</span>
            <a href="#" @click="Uncheck">取消勾选</a>
        </div>
        <div class="gap"></div>
        <el-table ref="seasCustomersRef" :data="data" style="width: 100%" @selection-change="handleSelectionChange"
            :header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }">
            <el-table-column type="selection" width="55" />
            <el-table-column label="客户名称" prop="customername" />
            <el-table-column label="联系电话" prop="customerphone" />
            <el-table-column label="客户来源" prop="customersource" />
            <el-table-column label="客户等级" prop="customerlevel" />
            <el-table-column label="联系人" prop="customercontact" />
            <el-table-column label="最后跟进部门" prop="followupdepartment" />
            <el-table-column label="跟进状态" prop="followupstatus" />
            <el-table-column label="创建人" prop="founder" />
            <el-table-column label="创建时间" prop="followuptime" />
            <el-table-column label="操作" width="200">
                <template #default="{ row }">
                    <el-button type="primary" size="small" @click="editCustomer(row)">编辑</el-button>
                    <el-button type="success" size="small" @click="viewCustomer(row)">查看</el-button>
                    <el-button type="danger" size="small" @click="deleteCustomer(row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination">
            <el-pagination :page-size="pageSize" :page-sizes="[pageSize, 20, 30, 40]"
                layout="total, sizes, prev, pager, next, jumper" :total="total" :current-page="page"
                @current-change="changePage" background @size-change="updatePageSize" style="width:100%" />
        </div>
    </div>
</template>
  
<script lang="ts" setup>
import type { ICustomerData } from '@/types/customer';
import { onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';


interface IProps {
    pageSize: number
    page: number
    total: number
    data: ICustomerData.ICustomerList[]
    loadData: (page: number, pageSize: number) => void
    tableData: ICustomerData.ICustomerList[]
}
const props = defineProps<IProps>()
const route = useRoute()
const router = useRouter()
const changePage = (page: number) => {
    console.log(page)
    props.loadData(page, props.pageSize)
    const query = { ...route.query, page }
    router.replace({ query })
}
const updatePageSize = (pageSize: number) => {
    props.loadData(props.page, pageSize)
    const query = { ...route.query, pageSize }
    router.replace({ query })
};
//编辑
const editCustomer = (row: ICustomerData.ICustomerList) => {
    console.log(row.customername)
};
//查看
const viewCustomer = (row: ICustomerData.ICustomerList) => {
    console.log(row.customername)

};
//删除
const deleteCustomer = (row: ICustomerData.ICustomerList) => {
    console.log(row.customername)

};
//全选
const selectNumber = ref<number>(0)
const emit = defineEmits<{
    onSelectData: [data: ICustomerData.ICustomerList[]]
}>()
const handleSelectionChange = (val: ICustomerData.ICustomerList[]) => {
    const selectedId: number[] = val
        .filter(item => item.id !== undefined)
        .map(item => item.id!);
    selectNumber.value = selectedId.length
    const selectedData: ICustomerData.ICustomerList[] = val
        .filter(item => selectedId.includes(item.id!));
    emit('onSelectData', selectedData)

}
//结合数据
const combinedData = ref<ICustomerData.ICustomerList[]>([]);

onMounted(() => {
    combinedData.value = [...props.data, ...props.tableData];
});
// 取消勾选
const seasCustomersRef = ref()
const Uncheck = () => {
    const tableRef = seasCustomersRef.value;
    if (tableRef && tableRef.clearSelection) {
        tableRef.clearSelection();
    }

    selectNumber.value = 0;
}
</script>
  

<style lang="scss" scoped>
.seatable {
    width: 100%;
    height: 100%;

}

.tableData {
    height: 40px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background-color: #fff;

    span {
        margin: 0 20px;
    }
}

.gap {
    height: 10px;
    background-color: #f2f2f2;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border: 0;
}

.el-pagination {
    margin-top: 20px;
}

.pagination {
    width: 50%;
    margin: 0 auto;
}
</style>